/* eslint-disable react/no-unescaped-entities */
// eslint-disable-next-line no-unused-vars
import React from 'react'
import '../../assets/styles/Bangdan.scss'
export default function Bangdan() {
  return (
    <div className='ZT'>
        <div className='ZT-box'>
            <div className='ZT-header'>
                <div className='ZT-header-img'>
                    <img className='ZT-header-img2' src={new URL('../../assets/imgs/bangdan01.png', import.meta.url).href} alt="" />
                </div>
                <div className='Zt-header-gn'>
                    <p>飙升榜</p>
                    <img className='Zt-header-gn-bo' src={new URL('../../assets/imgs/bofang01.png',import.meta.url).href} alt="" />
                    <img className='Zt-header-gn-shou' src={new URL('../../assets/imgs/shoucang01.png',import.meta.url).href} alt="" />
                </div>
            </div>
            {/* 内容 */}
            <div className='ZT-content'>
                <div className='ZT-content-ji'>
                    <span style={{color:'#C84C67'}}>1</span>
                    <a>风驶过的声音是</a>
                </div>
                <div className='ZT-content-ou'>
                <span style={{color:'#C84C67'}}>2</span>
                    <a>星间旅行 Interstellar Journey (英文版)</a>
                </div>
                <div className='ZT-content-ji'>
                <span style={{color:'#C84C67'}}>3</span>
                    <a>星间旅行 Interstellar Journey (中文版)</a>
                </div>
                <div className='ZT-content-ou'>
                <span>4</span>
                    <a>爱一半留一半</a>
                </div>
                <div className='ZT-content-ji'>
                <span>5</span>
                    <a>慢冷 (Live版)</a>
                </div>
                <div className='ZT-content-ou'>
                <span>6</span>
                    <a>第一回合</a>
                </div>
                <div className='ZT-content-ji'>
                <span>7</span>
                    <a>金风玉露</a>
                </div>
                <div className='ZT-content-ou'>
                <span>8</span>
                    <a>Dormant Craving</a>
                </div>
                <div className='ZT-content-ji'>
                <span>9</span>
                    <a>普通人生</a>
                </div>
                <div className='active'>
                <span>10</span>
                    <a>夏夜最后的烟火</a>
                </div>
                <div className='active2'>
                    <span>查看全部</span>
                    <img src={new URL('../../assets/imgs/箭头 右(1).png',import.meta.url).href} alt="" />
                </div>
            </div>
        </div>
        {/* 内容2 */}
        <div className='ZT-box'>
            <div className='ZT-header'>
                <div className='ZT-header-img'>
                    <img className='ZT-header-img2' src={new URL('../../assets/imgs/bangdan02.png', import.meta.url).href} alt="" />
                </div>
                <div className='Zt-header-gn'>
                    <p>新歌榜</p>
                    <img className='Zt-header-gn-bo' src={new URL('../../assets/imgs/bofang01.png',import.meta.url).href} alt="" />
                    <img className='Zt-header-gn-shou' src={new URL('../../assets/imgs/shoucang01.png',import.meta.url).href} alt="" />
                </div>
            </div>
            {/* 内容 */}
            <div className='ZT-content'>
                <div className='ZT-content-ji'>
                    <span style={{color:'#C84C67'}}>1</span>
                    <a>风驶过的声音是</a>
                </div>
                <div className='ZT-content-ou'>
                <span style={{color:'#C84C67'}}>2</span>
                    <a>身骑白马 (Live版)</a>
                </div>
                <div className='ZT-content-ji'>
                <span style={{color:'#C84C67'}}>3</span>
                    <a>Don't Go Back Tonight</a>
                </div>
                <div className='ZT-content-ou'>
                <span>4</span>
                    <a>愿与愁</a>
                </div>
                <div className='ZT-content-ji'>
                <span>5</span>
                    <a>普通人生</a>
                </div>
                <div className='ZT-content-ou'>
                <span>6</span>
                    <a>アイドル</a>
                </div>
                <div className='ZT-content-ji'>
                <span>7</span>
                    <a>他不懂</a>
                </div>
                <div className='ZT-content-ou'>
                <span>8</span>
                    <a>Suygu</a>
                </div>
                <div className='ZT-content-ji'>
                <span>9</span>
                    <a>慢冷 (Live版)</a>
                </div>
                <div className='active'>
                <span>10</span>
                    <a>告白（紧紧相依的心如何say goodbye）</a>
                </div>
                <div className='active2'>
                    <span>查看全部</span>
                    <img src={new URL('../../assets/imgs/箭头 右(1).png',import.meta.url).href} alt="" />
                </div>
            </div>
        </div>
        {/* 内容3 */}
        <div className='ZT-box'>
            <div className='ZT-header'>
                <div className='ZT-header-img'>
                    <img className='ZT-header-img2' src={new URL('../../assets/imgs/bangdan03.png', import.meta.url).href} alt="" />
                </div>
                <div className='Zt-header-gn'>
                    <p>原创榜</p>
                    <img className='Zt-header-gn-bo' src={new URL('../../assets/imgs/bofang01.png',import.meta.url).href} alt="" />
                    <img className='Zt-header-gn-shou' src={new URL('../../assets/imgs/shoucang01.png',import.meta.url).href} alt="" />
                </div>
            </div>
            {/* 内容 */}
            <div className='ZT-content'>
                <div className='ZT-content-ji'>
                    <span style={{color:'#C84C67'}}>1</span>
                    <a>CSC 2023 CYPHER PART 1 “DRILL”</a>
                </div>
                <div className='ZT-content-ou'>
                <span style={{color:'#C84C67'}}>2</span>
                    <a>都是你</a>
                </div>
                <div className='ZT-content-ji'>
                <span style={{color:'#C84C67'}}>3</span>
                    <a>咋说</a>
                </div>
                <div className='ZT-content-ou'>
                <span>4</span>
                    <a>ANYWAY(Prod. by 808Mafia)</a>
                </div>
                <div className='ZT-content-ji'>
                <span>5</span>
                    <a>甜系青春</a>
                </div>
                <div className='ZT-content-ou'>
                <span>6</span>
                    <a>新的地图</a>
                </div>
                <div className='ZT-content-ji'>
                <span>7</span>
                    <a>天堂的歌</a>
                </div>
                <div className='ZT-content-ou'>
                <span>8</span>
                    <a>麻杰克</a>
                </div>
                <div className='ZT-content-ji'>
                <span>9</span>
                    <a>还是不明白</a>
                </div>
                <div className='active'>
                <span>10</span>
                    <a>老乡鸡</a>
                </div>
                <div className='active2'>
                    <span>查看全部</span>
                    <img src={new URL('../../assets/imgs/箭头 右(1).png',import.meta.url).href} alt="" />
                </div>
            </div>
        </div>
    </div>
  )
}
